'use client'

import { useState } from "react"
import { InboundItem } from "./inbound-item"
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"
import { Purchase, PurchaseStatus } from "@prisma/client"

type SerializedPurchase = Omit<Purchase, 'totalAmount' | 'createdAt' | 'updatedAt'> & {
  totalAmount: string
  createdAt: string
  updatedAt: string
  supplier: {
    id: number
    name: string
    contact: string
    phone: string
    address: string
    status: boolean
  }
}

interface InboundListProps {
  purchases: SerializedPurchase[]
}

const STATUS_MAP: Record<PurchaseStatus, string> = {
  PENDING: '待入库',
  COMPLETED: '已入库',
  CANCELLED: '已取消'
}

const STATUS_COLOR_MAP: Record<PurchaseStatus, string> = {
  PENDING: 'bg-yellow-100 text-yellow-800',
  COMPLETED: 'bg-green-100 text-green-800',
  CANCELLED: 'bg-red-100 text-red-800'
}

export function InboundList({ purchases }: InboundListProps) {
  const [searchTerm, setSearchTerm] = useState("")
  
  const filteredPurchases = purchases.filter(purchase => 
    purchase.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
    purchase.supplier.name.toLowerCase().includes(searchTerm.toLowerCase())
  )

  return (
    <div className="space-y-4">
      <div className="relative">
        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
          <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
        </div>
        <input
          type="text"
          placeholder="搜索入库单..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="
            block w-full pl-10 pr-4 py-2.5
            rounded-lg
            border border-gray-300
            bg-white text-gray-900
            shadow-sm
            placeholder:text-gray-400
            focus:border-blue-500 focus:ring-1 focus:ring-blue-500
          "
        />
      </div>
      
      <div className="bg-white shadow rounded-lg overflow-hidden">
        <div className="min-w-full">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  入库单号
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  供应商
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  总金额
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  状态
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  创建时间
                </th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                  操作
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {filteredPurchases.map((purchase) => (
                <InboundItem 
                  key={purchase.id} 
                  purchase={purchase}
                  statusMap={STATUS_MAP}
                  statusColorMap={STATUS_COLOR_MAP}
                />
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
} 